<template>
  <div class="upload-wrapper">
    <div class="upload-drog" v-on:drop.stop.prevent="fileDrop">
      <div class="card  card-list" v-for="file in fileList">
        <div class="card-block">
          <!--<h2 v-text="progress"></h2>-->
          <a class="file-del" @click="delFile(file.id)">del</a>
          <p class="file-title text-center" v-text="file.name"></p>
        </div>
      </div>
      <input type="file" @change="changeFile" class="upload-file-input" multiple>
      <div class="buttons-wrapper">
        <button @click="uploadFile" type="button" :disabled="!fileList.length"  class="btn btn-outline-info">开始上传</button>
        <button @click="selectFile" type="button"  class="btn btn-outline-primary">选择文件</button>
      </div>
    </div>

  </div>
</template>

<script>
  /* eslint-disable no-labels */

  let uploadUrl = '/api/upload'
  export default {

    name: 'upload',
    data () {
      return {
        $file: null,
        progressId: '',
        fileList: []
      }
    },
    mounted () {
      this.$file = this.$el.getElementsByClassName('upload-file-input')[0]
    },
    methods: {
      selectFile () {
        if (this.$file) {
          this.$file.click()
        }
      },
      onProgress: function (e) {
        this.progress = parseInt(e.loaded / e.total * 100) + '%'
      },
      changeFile () {
        let fileList = this.$file.files
        this.addFiles(fileList)
      },
      uploadFile () {
        this.fileUpload(this.fileList[0].file)
      },
      fileUpload (file) {
        this.$http.post(uploadUrl, file, {
          headers: {
            'Content-Type': 'multipart/form-data',
            'X_FILENAME': file.name,
            'Access-Control-Allow-Origin': '*'
          },
          'onUploadProgress': this.onProgress
        }).then(response => {
        }, response => {
        })
      },
      fileDrop (e) {
        let fileList = e.dataTransfer.files
        if (fileList.length === 0) {
          return false
        }
        this.addFiles(fileList)
      },
      delFile (id) {
        this.fileList = this.fileList.filter(function (file) {
          return file.id !== id
        })
      },
      addFiles (fileList) {
        label: for (let i = 0; i < fileList.length; i++) {
          let file = fileList[i]
          for (let j = 0; j < this.fileList.length; j++) {
            if (this.fileList[j].file.lastModified === file.lastModified) {
              continue label
            }
          }
          let obj = {}
          obj.file = file
          obj.id = file.lastModified
          obj.name = file.name
          obj.type = this.getType(file.name)
          obj.progress = 0
          this.fileList.push(obj)
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .upload-file-input {
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
  }

  .buttons-wrapper {
    position: absolute;
    bottom: 20px;
    right:20px;
  }
  .buttons-wrapper button {
    float: right;
    margin-left: 20px;
  }
  /*.upload-btn {
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .upload-btn.file {
    transform: none;
    top: 90%;
    right: 5%;
  }

  .select-btn {
    position: absolute;
    top: 90%;
    right: 20%;
    display: none;
  }

  .select-btn.file {
    display: block;
  }*/

  .file-del {
    display: block;
    position: absolute;
    top: -3px;
    right: -3px;
    padding: 10px;
    background-color: red;
    border-radius: 0 0 0 100%;
    cursor: pointer;
  }
</style>
